<template>
  <div class="nav" :style="{ background: floors.background }">
    <div class="nav-view">
      <template v-if="floors.layout != 0">
        <van-swipe
          @change="navChange"
          :show-indicators="
            pages(floors.navigations, floors.column * floors.layout).length > 1
          "
        >
          <van-swipe-item
            v-for="(pageItem, pageIndex) in pages(
              floors.navigations,
              floors.column * floors.layout
            )"
            :key="pageIndex"
          >
            <div class="slick-list needsclick">
              <div
                class="slick-item needsclick"
                v-for="(navItem, index) in pageItem"
                :key="index"
                :class="[
                  floors.column == '3' ? 'w3' : '',
                  floors.column == '4' ? 'w25' : '',
                  floors.column == '5' ? 'w20' : ''
                ]"
                @click="jumpPage(navItem)"
              >
                <!-- <img
                  class="img needsclick"
                  :src="
                    navItem.icon
                      ? $imgUrlHead + navItem.icon
                      : require('../../assets/images/moren.png')
                  "
                  alt=""
                /> -->
								 <legend-image class="img needsclick" :pic="navItem.icon"  :options="{w:'45',h:'45'}"  />
                <span class="text" :style="{ color: floors.fontColor }">{{
                  navItem.title
                }}</span>
              </div>
            </div>
          </van-swipe-item>

          <template
            v-if="
              pages(floors.navigations, floors.column * floors.layout).length >
                1
            "
          >
            <div class="nav-indicator" slot="indicator">
              <span
                v-for="(item, index) in pages(
                  floors.navigations,
                  floors.column * floors.layout
                )"
                :key="index"
                class="item-indicator"
                :class="{ on: navCurrent == index }"
              >
              </span>
            </div>
          </template>
        </van-swipe>
      </template>

      <!-- 一直往下走 -->
      <template v-if="floors.layout == 0">
        <div class="slick-list">
          <div
            class="slick-item"
            v-for="(navItem, index) in floors.navigations"
            :key="index"
            :class="[
              floors.column == '3' ? 'w3' : '',
              floors.column == '4' ? 'w25' : '',
              floors.column == '5' ? 'w20' : ''
            ]"
            @click="jumpPage(navItem)"
          >
           <!-- <img
              class="img"
              :src="
                navItem.icon
                  ? $imgUrlHead + navItem.icon
                  : require('../../assets/images/moren.png')
              "
              alt=""
            /> -->
						<legend-image class="img needsclick" :pic="navItem.icon"  :options="{w:'45',h:'45'}"  />
            <span class="text" :style="{ color: floors.fontColor }">{{
              navItem.title
            }}</span>
          </div>
        </div>
      </template>
      <!-- 一直往下走 -->
	  <bind-phone :bindPhone="bindPhone" ref="bindPhone" @callback="callbackDetail" />
    </div>
  </div>
</template>

<script>
import legendImage from 'components/legendImage/legendImage'
import bindPhone from 'components/bindPhone/bindPhone'
import jumpMixin from "mixin/jumpMixin.js"
function page(navigations, pageSize) {
  var result = [];
  // var total = navigations.length;
  // var pageCount = total % pageSize == 0 ? total / pageSize : (Math.floor(total/pageSize) + 1);

  navigations.forEach((item, index) => {
    const page = Math.floor(index / pageSize);
    if (!result[page]) {
      result[page] = [];
    }
    result[page].push(item);
  });
  return result;
}

export default {
	components: {
		legendImage,
		bindPhone
	},
  props: {
    floors: Object
  },
  mixins: [jumpMixin],
  data() {
    return {
      navCurrent: 0,
      pages: page,
	  bindPhone: {
	  	already: false, // 是否已绑定
	  	showPopup: false
	  },
    };
  },
  methods: {
    navChange(index) {
      this.navCurrent = index;
    },
	//确认绑定成功后回调
	callbackDetail() {
		
	}
  }
};
</script>
<style scoped>
/* 图文导航 */
.nav {
  width: 100%;
  /* min-height: 100px; */
  overflow: hidden;
  background-size: 100%;
  background-position: top;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  box-sizing: content-box;
  /* margin-top: -9px;
    border-radius: 15px;
    position: relative;
    z-index: 2;
    box-shadow: 0 2px 3px rgba(0,0,0,0.05); */
}

.nav.action {
  margin-top: -9px;
  border-radius: 15px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}

.nav .nav-view {
  /* padding: 10px; */
  /* width: 350px; */
  overflow-x: auto;
  overflow-y: hidden;
  /* min-height: 100px; */
  height: 100%;
}

.nav .nav-view .slick-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.nav .nav-view .slick-list.posi {
  position: relative;
}

.nav .nav-view .slick-list .slick-item {
  display: block;
  padding: 10px 0;
  box-sizing: border-box;
}

.nav .nav-view .slick-list .slick-item.w3 {
  width: 33.3%;
}

.nav .nav-view .slick-list .slick-item.w20 {
  width: 20%;
}

.nav .nav-view .slick-list .slick-item.w25 {
  width: 25%;
}

.nav .nav-view .slick-list .slick-item .img {
  display: block;
  width: 45px;
  height: 45px;
  margin: auto;
}

.nav .nav-view .slick-list .slick-item .text {
  display: block;
  font-size: 12px;
  line-height: 14px;
  margin-top: 10px;
  margin-bottom: 5px;
  font-family: arial;
  text-align: center;
}

.nav-indicator {
  position: absolute;
  bottom: -4px;
  width: 100%;
  height: 25px;
  text-align: center;
}

.nav-indicator .item-indicator {
  display: inline-block;
  margin: 0 2px;
  width: 8px;
  height: 1px;
  background: rgba(51, 51, 51, 1);
  opacity: 0.2;
  border-radius: 1px;
}

.nav-indicator .item-indicator.on {
  opacity: 1;
  width: 12px;
}

.van-swipe {
  /* min-height: 100px; */
  height: 100%;
}

/* 图文导航 end */
</style>
